/*
 * @Author: sea 
 * @Date: 2020-04-18 07:18:20 
 * @Last Modified by: sea
 * @Last Modified time: 2020-04-18 07:20:04
 */

/* 头部导航条 */
.sea-header{
    display: flex;
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    height: 2.3rem; line-height: 2.3rem;
    text-align: center;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid #ddd;
    background: #ffffff;
}
/* 

这里面没有使用“left: 0;”来把标题栏放在窗口最左面，这是因为如果不给它限定水平方向位置，那么它起始的位置就时它脱离文档流之前的位置，也就是现在 body 的起始位置。这样在超宽屏幕下也能保证标题栏也在 body 的左上角，而不是屏幕的左上角。
box-sizing: border-box; 使用了怪异盒模型，是因为使用了border来分隔标题栏和内容区，这样标题栏的高度就是“height: 2.3rem;”所指定的高度了。
max-width: 640px; 和 body 统一，限定了最大宽度就是 640px，不限定的话导航条的宽度就变成了整个屏幕的宽度，在超宽屏幕下会造成错乱。
*/


.sea-header > .left{
    flex-basis: 3rem;
    flex-shrink: 0;
}
.sea-header > .title{
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sea-header > .right{
    flex-basis: 3rem;
    flex-shrink: 0;
}